<template>
  <div class="item-right-title">
    <div>{{ state.nodeName }}</div>
  </div>
  <div class="item-right-select" style="width: 155px; justify-content: flex-end">
    <div class="select-have">
      <div v-if="state.showApplyPerson.length + state.addPerson.length > 6" class="select-out">
        <span class="selectH" @click="state.showAllPerson = true">
          <span class="select-img">
            <img class="img-avatar" :src="state.imgDefault" alt="" />
          </span>
          <span class="select-text">查看全部</span>
        </span>
        <span class="add-symbol">
          <SymbolIcon symbol="+" />
        </span>
      </div>
      <template v-if="state.showApplyPerson.length > 0">
        <div v-for="(i, index) in state.showApplyPerson" :key="i.id" class="select-out">
          <span v-if="index < 2" class="selectH">
            <span class="select-img">
              <img class="img-avatar" :src="i.avatar || state.imgAvatar" alt=""
            /></span>
            <span class="select-text">{{ i.username }}</span>
          </span>
          <span v-if="index < 2" class="add-symbol"> <SymbolIcon :symbol="props.symbol" /> </span>
        </div>
      </template>
      <template v-if="state.addPerson.length > 0">
        <div v-for="(item, index) in state.addPerson" :key="index" class="select-out">
          <span v-if="index + state.showApplyPerson.length < 2" class="selectH">
            <span class="select-img">
              <img class="img-avatar" :src="item.avatar || state.imgAvatar" alt="" />
              <icon
                v-if="index + state.showApplyPerson.length < 2"
                class="select-remove"
                size="15px"
                @click="onDeletePerson(state.addPerson, index)"
              >
                <img src="@/assets/img/icon_delete.png" style="width: 14px" alt="" />
              </icon>
            </span>
            <span class="select-text">{{ item.realName }}</span>
          </span>

          <span v-if="index + state.showApplyPerson.length < 2" class="add-symbol">
            <SymbolIcon :symbol="props.symbol" />
          </span>
        </div>
      </template>
      <template v-if="state.oaCopyUserAdd">
        <div class="select-out">
          <span class="selectP" @click="selectPeople">
            <icon class="avatar-select-icon" size="24px">
              <SymbolIcon symbol="+" color="primary" />
            </icon>
          </span>
        </div>
      </template>
    </div>
  </div>
  <!-- 指定人员展示使用，选择人员展示  大于6人样式-->
  <a-modal
    :visible="state.showAllPerson"
    width="760px"
    :show-close="false"
    :destroy-on-close="true"
    custom-class="select-organ"
    @close="state.showAllPerson = false"
  >
    <template #header>
      <div class="add-title">
        <span>查看全部</span>
        <span class="close">
          <icon size="20px" @click="state.showAllPerson = false"><close /></icon>
        </span>
      </div>
    </template>
    <div class="self-body-warp">
      <span class="self-sub-title">
        抄送人共{{ state.showApplyPerson.length + state.addPerson.length }}人
      </span>
      <div class="item-right-select" style="margin-top: 12px; justify-content: flex-start">
        <div class="select-have">
          <template v-if="state.oaCopyUserAdd">
            <div class="select-out">
              <span class="selectP" @click="selectPeople">
                <icon class="avatar-select-icon" size="24px">
                  <SymbolIcon symbol="+" color="primary" />
                </icon>
              </span>
              <span
                v-if="state.showApplyPerson.length > 0 || state.addPerson.length > 0"
                class="add-symbol"
              >
                <SymbolIcon symbol="+" />
              </span>
            </div>
          </template>
          <template v-if="state.showApplyPerson.length > 0">
            <div v-for="i in state.showApplyPerson" :key="i.id" class="select-out">
              <span class="selectH">
                <span class="select-img">
                  <img class="img-avatar" :src="i.avatar || state.imgAvatar" alt=""
                /></span>
                <span class="select-text">{{ i.username }}</span>
              </span>
              <span class="add-symbol">
                <SymbolIcon :symbol="props.symbol" />
              </span>
            </div>
          </template>
          <template v-if="state.addPerson.length > 0">
            <div v-for="(item, index) in state.addPerson" :key="index" class="select-out">
              <span class="selectH">
                <span class="select-img"
                  ><img class="img-avatar" :src="item.avatar || state.imgAvatar" alt="" />
                  <icon
                    class="select-remove"
                    size="15px"
                    @click="onDeletePerson(state.addPerson, index)"
                  >
                    <img src="@/assets/img/icon_delete.png" style="width: 14px" alt="" />
                  </icon>
                </span>
                <span class="select-text">{{ item.realName }}</span>
              </span>

              <span class="add-symbol">
                <SymbolIcon :symbol="props.symbol" />
              </span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </a-modal>
  <!-- 组织架构选择抄送人弹框-->
  <a-modal
    v-model="state.showPupopStruct"
    width="760px"
    :show-close="false"
    :destroy-on-close="true"
    custom-class="select-organ"
    @close="state.showPupopStruct = false"
  >
    <template #header>
      <div class="add-title">
        <span>选择{{ state.nodeName }}</span>
        <span class="close">
          <icon size="20px" @click="cancelDialog"><close /></icon>
        </span>
      </div>
    </template>
  </a-modal>
</template>
<script setup>
import { reactive, toRef, defineProps, defineEmits, watchEffect } from 'vue';
// import { Plus, RemoveFilled, Close, ArrowLeftBold } from '@element-plus/icons-vue';
import SymbolIcon from '@/components/base/symbolIcon.vue';
let props = defineProps({
  title: String,
  isPeople: {
    // 是否使用【部门架构组件】选择人员还是【指定人员组件】选择人员，true显示纯人员选择组件，false部门架构人员组件
    type: Boolean,
    default: false
  },
  peopleIsMultiple: {
    // 【部门架构组件】【指定人员组件】单选还是多选 true默认多选
    type: Boolean,
    default: true
  },
  people: {
    // OA临时添加  显示传入的人员数组
    type: Array,
    default: () => []
  },
  isUserAdd: {
    // OA临时添加 是否显示加号
    type: Boolean,
    default: false
  },
  symbol: {
    // 人员连接符号
    type: String,
    default: '+'
  },
  nodeId: {
    type: String,
    default: ''
  }
});
let emit = defineEmits(['toResult']);
let state = reactive({
  imgDefault: require('@/assets/img/oa-copy.png'),
  imgAvatar: require('@/assets/img/oa-img-default.png'),
  nodeName: props.title, // 抄送人
  oaCopyUserAdd: props.isUserAdd, // 是否自选
  showPupopStruct: false, // 抄送人选择弹框
  showApplyPerson: [], // 后台传入人员数组
  addPerson: [], // 自选人员数组
  allPerson: [],
  showAllPerson: false // 展示全部抄送人的弹框
});
watchEffect(() => {
  if (state.showApplyPerson && state.showApplyPerson.length === 0) {
    if (props.people && props.people.length > 0) {
      const getpropper = toRef(props, 'people');
      let getNewPersonProp = getpropper.value.map(item => {
        item['userId'] = item.id;
        item['isDisabled'] = true;
        return item;
      });
      state.showApplyPerson = getNewPersonProp;
    }
  }
  let obj = [...state.showApplyPerson, ...state.addPerson];
  let data = {
    people: obj,
    nodeId: props.nodeId
  };

  emit('toResult', data);
});

// 删除自选人员
let onDeletePerson = (ary, index) => {
  ary.splice(index, 1);
};
const onOfficerSelectAry = officerSelectAry => {
  if (props.showApplyPersonProp && props.showApplyPersonProp.length > 0) {
    // 如果存在传过来的抄送人,合并
    state.showApplyPerson = [...state.showApplyPerson, ...officerSelectAry];
  } else {
    state.showApplyPerson = officerSelectAry;
  }
  let getObj = {};
  let getAry = [];
  for (let i = 0; i < state.showApplyPerson.length; i++) {
    if (getObj[state.showApplyPerson[i].userId] === undefined) {
      getAry.push(state.showApplyPerson[i]);
    }
    getObj[state.showApplyPerson[i].userId] = state.showApplyPerson[i].userId;
  }
  state.showApplyPerson = getAry;
};

// 打开人员选择
let selectPeople = () => {
  state.showPupopStruct = true;
};
// 关闭选择弹框
let cancelDialog = () => {
  state.showPupopStruct = false;
};

// 赋值所选人员
let confirmDialog = data => {
  state.showPupopStruct = false;
  // data  添加的新的选择的值
  if (state.addPerson.length > 0) {
    let arr = state.addPerson.concat(data);
    state.addPerson = uniqueArr(arr);
  } else {
    state.addPerson = data;
  }
  // 新的选择的值要去掉页面传入的指定的值
  if (state.showApplyPerson.length > 0 && state.addPerson.length > 0) {
    state.showApplyPerson.forEach(item => {
      state.addPerson.forEach((params, index) => {
        if (item.userId === params.userId) {
          state.addPerson.splice(index, 1);
        }
      });
    });
  }
  let obj = [...state.showApplyPerson, ...state.addPerson];
  let result = {
    people: obj,
    nodeId: props.nodeId
  };
  emit('toResult', result);
};

// 人员选择去重
function uniqueArr(array) {
  let r = [];
  for (let i = 0, l = array.length; i < l; i++) {
    for (let j = i + 1; j < l; j++) {
      if (array[i].userId === array[j].userId) j = ++i;
    }
    r.push(array[i]);
  }
  return r;
}
</script>
<style lang="less" scoped>
@import '../style/addFlowPerson.less';
</style>
